<template>
  <div class="news-container">
    <div id="bar" style="width: 500px; height: 700px"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue'
import axios from 'axios'
import * as echarts from 'echarts'
type StateType = { list: any[]; ageArr: number[] }
export default defineComponent({
  setup() {
    const state: StateType = reactive({
      list: [],
      ageArr: []
    })
    // setup->created
    const getData = async () => {
      const res = await axios.get('http://localhost:9999/news')
      console.log('res:', res.data)
      state.list = res.data
      state.list.forEach((item) => {
        state.ageArr.push(item.age)
      })

      console.log(' state.ageArr:', state.ageArr)
      drawEarchs('bar')
    }
    getData()

    onMounted(() => {
      // 绘制bar
      // drawEarchs('bar')
    })

    const drawEarchs = (nodeText: string) => {
      //  基于准备好的dom，初始化echarts实例
      const dom = document.getElementById(nodeText)
      if (dom) {
        var myChart = echarts.init(dom)
        // 绘制图表
        myChart.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              type: 'pictorialBar',
              name: 'pictorial element',
              z: 10,
              data: [
                {
                  value: 30,
                  symbol: 'diamond',
                  symbolOffset: [0, '-50%'],
                  symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                  symbolSize: ['-95%', 90], //根据柱子大小来做调整
                  itemStyle: {
                    normal: {
                      color: '#FEE47B'
                    }
                  }
                },
                {
                  value: 40,
                  symbol: 'diamond',
                  symbolOffset: [0, '-50%'],
                  symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                  symbolSize: ['-95%', 90], //根据柱子大小来做调整
                  itemStyle: {
                    normal: {
                      color: '#FEE47B'
                    }
                  }
                },
                {
                  value: 50,
                  symbol: 'diamond',
                  symbolOffset: [0, '-50%'],
                  symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                  symbolSize: ['-95%', 90], //根据柱子大小来做调整
                  itemStyle: {
                    normal: {
                      color: '#FEE47B'
                    }
                  }
                },
                {
                  value: 60,
                  symbol: 'diamond',
                  symbolOffset: [0, '-50%'],
                  symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                  symbolSize: ['-95%', 90], //根据柱子大小来做调整
                  itemStyle: {
                    normal: {
                      color: '#FEE47B'
                    }
                  }
                }
              ]
            },
            {
              type: 'bar',
              name: 'reference bar',
              barGap: '-100%',
              // symbol: 'image://' + params.picture, // 图片自己切或者让UI设计切喔
              symbolOffset: [0, 0],
              z: 2,
              itemStyle: {
                // 有图就别用渐变了哈，图片更真实
                color: {
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    { offset: 0, color: '#bd530a' },
                    { offset: 0.5, color: '#bd530a' },
                    { offset: 0.5, color: '#ca7e06' },
                    { offset: 1, color: '#ca7e06' }
                  ]
                }
              },
              data: [30, 40, 50, 60]
            },
            {
              type: 'pictorialBar',
              name: 'joy',
              barGap: '-100%',
              z: 3,
              data: [
                {
                  value: 10,
                  symbol: 'triangle',
                  symbolOffset: [0, 40],
                  symbolSize: ['-100%', 40],
                  symbolRotate: 180,
                  itemStyle: {
                    color: {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#bd530a' },
                        { offset: 0.5, color: '#bd530a' },
                        { offset: 0.5, color: '#ca7e06' },
                        { offset: 1, color: '#ca7e06' }
                      ]
                    }
                  }
                },
                {
                  value: 10,
                  symbol: 'triangle',
                  symbolOffset: [0, 40],
                  symbolSize: ['-100%', 40],
                  symbolRotate: 180,
                  itemStyle: {
                    color: {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#bd530a' },
                        { offset: 0.5, color: '#bd530a' },
                        { offset: 0.5, color: '#ca7e06' },
                        { offset: 1, color: '#ca7e06' }
                      ]
                    }
                  }
                },
                {
                  value: 10,
                  symbol: 'triangle',
                  symbolOffset: [0, 40],
                  symbolSize: ['-100%', 40],
                  symbolRotate: 180,
                  itemStyle: {
                    color: {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#bd530a' },
                        { offset: 0.5, color: '#bd530a' },
                        { offset: 0.5, color: '#ca7e06' },
                        { offset: 1, color: '#ca7e06' }
                      ]
                    }
                  }
                },
                {
                  value: 10,
                  symbol: 'triangle',
                  symbolOffset: [0, 40],
                  symbolSize: ['-100%', 40],
                  symbolRotate: 180,
                  itemStyle: {
                    color: {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        { offset: 0, color: '#bd530a' },
                        { offset: 0.5, color: '#bd530a' },
                        { offset: 0.5, color: '#ca7e06' },
                        { offset: 1, color: '#ca7e06' }
                      ]
                    }
                  }
                }
              ]
            }
          ]
        })
      }
    }

    return {}
  }
})
</script>
